Vue.js 是一个用于构建用户界面的渐进式框架，其基本语法包括模板语法、指令、组件、计算属性、方法、生命周期钩子等。以下是 Vue.js 的基本语法和示例，帮助你快速上手。

### 1. 模板语法

Vue 使用基于 HTML 的模板语法，允许你声明式地将 DOM 绑定到 Vue 实例的数据。

#### 1.1 插值

使用双大括号 `{{ }}` 进行文本插值。

**示例：**
```html
<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>
```

#### 1.2 原始 HTML

使用 `v-html` 指令渲染原始 HTML。

**示例：**
```html
<div id="app">
  <p v-html="rawHtml"></p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      rawHtml: '<span style="color: red;">这是一个红色的文本</span>'
    }
  });
</script>
```

### 2. 指令

Vue 提供了许多内置指令，用于操作 DOM。

#### 2.1 `v-bind`

动态绑定 HTML 属性。

**语法：**
```html
<a v-bind:href="url">链接</a>
<!-- 缩写 -->
<a :href="url">链接</a>
```

**示例：**
```html
<div id="app">
  <a :href="url">访问 Vue 官网</a>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>
```

#### 2.2 `v-model`

双向数据绑定。

**示例：**
```html
<div id="app">
  <input v-model="message" placeholder="编辑我">
  <p>消息是: {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>
```

#### 2.3 `v-if`, `v-else`, `v-else-if`

条件渲染。

**示例：**
```html
<div id="app">
  <p v-if="seen">现在你看到我了</p>
  <p v-else>现在你看不到我了</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      seen: true
    }
  });
</script>
```

#### 2.4 `v-for`

列表渲染。

**示例：**
```html
<div id="app">
  <ol>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ol>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' },
        { id: 3, text: '项目3' }
      ]
    }
  });
</script>
```

#### 2.5 `v-on`

事件监听。

**语法：**
```html
<button v-on:click="methodName">点击我</button>
<!-- 缩写 -->
<button @click="methodName">点击我</button>
```

**示例：**
```html
<div id="app">
  <button @click="greet">点击我</button>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      greet: function() {
        alert('Hello, Vue!');
      }
    }
  });
</script>
```

### 3. 组件

组件是可复用的 Vue 实例，用于构建复杂的单页应用。

#### 3.1 定义组件

使用 `Vue.component` 定义全局组件。

**示例：**
```html
<div id="app">
  <my-component></my-component>
</div>

<script>
  // 定义全局组件
  Vue.component('my-component', {
    template: '<p>这是一个全局组件</p>'
  });

  new Vue({
    el: '#app'
  });
</script>
```

#### 3.2 局部组件

在 Vue 实例中定义局部组件。

**示例：**
```html
<div id="app">
  <my-component></my-component>
</div>

<script>
  // 定义局部组件
  const MyComponent = {
    template: '<p>这是一个局部组件</p>'
  };

  new Vue({
    el: '#app',
    components: {
      'my-component': MyComponent
    }
  });
</script>
```

### 4. 计算属性

计算属性用于声明依赖其他数据的复杂逻辑。

**示例：**
```html
<div id="app">
  <p>原始消息: "{{ message }}"</p>
  <p>计算后的反转消息: "{{ reversedMessage }}"</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    computed: {
      reversedMessage: function() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>
```

### 5. 方法

方法用于处理事件和其他逻辑。

**示例：**
```html
<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">反转消息</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    methods: {
      reverseMessage: function() {
        this.message = this.message.split('').reverse().join('');
      }
    }
  });
</script>
```

### 6. 生命周期钩子

生命周期钩子允许你在 Vue 实例的不同阶段执行代码。

**常用生命周期钩子：**

- **`created`**: 实例创建完成后调用。
- **`mounted`**: 实例挂载到 DOM 后调用。
- **`updated`**: 数据更新导致虚拟 DOM 重新渲染和打补丁后调用。
- **`destroyed`**: 实例销毁后调用。

**示例：**
```html
<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    created: function() {
      console.log('实例已创建');
    },
    mounted: function() {
      console.log('实例已挂载');
    },
    updated: function() {
      console.log('实例已更新');
    },
    destroyed: function() {
      console.log('实例已销毁');
    }
  });
</script>
```

### 7. 样式绑定

使用 `v-bind:class` 和 `v-bind:style` 绑定 CSS 类和样式。

#### 7.1 绑定类

**示例：**
```html
<div id="app">
  <div :class="{ active: isActive, 'text-danger': hasError }">类绑定示例</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isActive: true,
      hasError: false
    }
  });
</script>

<style>
  .active {
    background-color: lightgreen;
  }
  .text-danger {
    color: red;
  }
</style>
```

#### 7.2 绑定样式

**示例：**
```html
<div id="app">
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">样式绑定示例</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      activeColor: 'red',
      fontSize: 30
    }
  });
</script>
```

### 8. 过滤器

过滤器用于格式化文本。

**示例：**
```html
<div id="app">
  {{ message | capitalize }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello, vue!'
    },
    filters: {
      capitalize: function(value) {
        if (!value) return '';
        value = value.toString();
        return value.charAt(0).toUpperCase() + value.slice(1);
      }
    }
  });
</script>
```

### 9. 自定义指令

自定义指令用于注册全局或局部指令。

**示例：**
```html
<div id="app">
  <p v-focus>这是一个自动聚焦的输入框</p>
</div>

<script>
  // 注册全局指令
  Vue.directive('focus', {
    inserted: function(el) {
      el.focus();
    }
  });

  new Vue({
    el: '#app'
  });
</script>
```

### 总结

以下是 Vue.js 的一些基本语法和示例：

- **模板语法**：使用双大括号 `{{ }}` 进行文本插值，使用 `v-html` 渲染原始 HTML。
- **指令**：如 `v-bind`、`v-model`、`v-if`、`v-for`、`v-on` 等。
- **组件**：使用 `Vue.component` 定义全局组件，或在 Vue 实例中定义局部组件。
- **计算属性**：用于声明依赖其他数据的复杂逻辑。
- **方法**：用于处理事件和其他逻辑。
- **生命周期钩子**：如 `created`、`mounted`、`updated`、`destroyed`。
- **样式绑定**：使用 `v-bind:class` 和 `v-bind:style` 绑定 CSS 类和样式。
- **过滤器**：用于格式化文本。
- **自定义指令**：注册全局或局部指令。

掌握这些基本语法和概念，可以帮助你快速上手 Vue.js 并构建复杂的单页应用。